<template>
  <div 
    class="bg-dark-secondary rounded-xl overflow-hidden card-hover cursor-pointer group"
    @click="$emit('click', project)"
  >
    <!-- 项目图片 -->
    <div class="relative overflow-hidden h-48">
      <img 
        :src="project.images[0]" 
        :alt="project.title"
        class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
        loading="lazy"
      />
      <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      
      <!-- 分类标签 -->
      <div class="absolute top-4 left-4">
        <span class="bg-accent-blue/90 text-white px-3 py-1 rounded-full text-sm font-medium">
          {{ getCategoryName(project.category) }}
        </span>
      </div>
      
      <!-- 年份标签 -->
      <div class="absolute top-4 right-4">
        <span class="bg-dark-bg/80 text-dark-text px-3 py-1 rounded-full text-sm">
          {{ project.year }}
        </span>
      </div>
    </div>
    
    <!-- 项目信息 -->
    <div class="p-6">
      <h3 class="text-xl font-bold text-dark-text mb-2 group-hover:text-accent-blue transition-colors duration-300">
        {{ project.title }}
      </h3>
      
      <p class="text-dark-muted text-sm mb-4 line-clamp-2">
        {{ project.description }}
      </p>
      
      <!-- 技术栈标签 -->
      <div class="flex flex-wrap gap-2 mb-4">
        <span 
          v-for="tech in project.technologies.slice(0, 3)" 
          :key="tech"
          class="bg-dark-bg text-dark-text px-2 py-1 rounded text-xs border border-dark-border"
        >
          {{ tech }}
        </span>
        <span 
          v-if="project.technologies.length > 3"
          class="text-dark-muted text-xs px-2 py-1"
        >
          +{{ project.technologies.length - 3 }}
        </span>
      </div>
      
      <!-- 项目详情 -->
      <div class="flex justify-between items-center text-sm text-dark-muted">
        <span>开发周期: {{ project.duration }}</span>
        <div class="flex items-center space-x-1">
          <ArrowRight class="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
          <span>查看详情</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ArrowRight } from 'lucide-vue-next'
import type { Project } from '@/data/projects'
import { getCategoryName } from '@/data/projects'

interface Props {
  project: Project
}

defineProps<Props>()
defineEmits<{
  click: [project: Project]
}>()
</script>

<style scoped>
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>